<template>
  <div class="home-page">
    <view class="status-bar"
      :style="{ height: statusBarHeight + 'px', background: userInfo.identity == 2 || userInfo.identity == 3 ? '#02CE9D' : 'white' }">
    </view>

    <view class="login-navbar" v-if="userInfo.identity == 1">
      <view class="navbar-content">
        <text class="nav-title">首页</text>
      </view>
    </view>

    <!-- 医生、护士内容 -->
    <view class="mall-navbar" style="padding: 16rpx 32rpx 36rpx 16rpx; background: #02CE9D;"
      v-if="userInfo.identity == 2 || userInfo.identity == 3">
      <view class="navbar-content">
        <view class="nav-left">
          <image src="/static/new/logo.png" mode="scaleToFill" style="width: 74rpx; height: 74rpx;" />
          <text class="nav-title" style="margin-left: 12rpx;">汉菱医疗 </text>
        </view>
        <view class="nav-right">

        </view>
      </view>

      <div style="margin-top: 24rpx; display: flex; width: 100%; justify-content: space-between;">
        <!-- <image :src="userInfo.avatar_url" mode="scaleToFill" style="width: 124rpx; height: 124rpx; border-radius: 50%;" /> -->

        <div style="display: flex;">
          <u-avatar :src="userInfo.avatar_url" fontSize="72rpx" bg-color="white"></u-avatar>

          <div style="margin-left: 16rpx; color: white; display: flex; flex-direction: column;">
            <div>
              {{ userInfo.doctor.name }}
            </div>

            <div style="margin-top: 16rpx;">
              {{ userInfo.hospital.name }}
            </div>
          </div>
        </div>

        <div style="display: flex; justify-content: center; align-items: center; width: 160rpx;
        height: 60rpx; color: white; background: #469FFF ; border-radius: 8rpx;">证件</div>
      </div>
    </view>

    <!-- 医生，护士内容 -->
    <view style="padding-left: 12rpx; padding-right: 12rpx;" v-if="userInfo.identity == 2 || userInfo.identity == 3">

      <view style="margin-top: 26rpx; margin-bottom: 26rpx; color: #000000;">
        患者消息
      </view>

      <!-- 患者信息 -->
      <view class="patient-info"
        style="background-color: white; padding: 30rpx; border-radius: 26rpx; margin-bottom: 12rpx;"
        v-for="(chat, index) in chatList" :key="index"
        @click="onSession(chat.user.user_id, chat.type, chat.session_id)">

        <div style="display: flex; justify-content: space-between; color: #000000;">
          <div style="display: flex; align-items: center;">
            <u-avatar fontSize="96rpx" :src="chat.user.avatar_url.preview_url"></u-avatar>
            <!-- <image style="width: 96rpx; height: 96rpx;" :src="chat.user." mode="scaleToFill" /> -->
            <span style="margin-left: 12rpx;">{{ chat.user.name || "未知" }}</span> <span style="margin-left: 12rpx;">{{
              chat.user.gender }}</span> <span style="margin-left: 12rpx;">{{ chat.user.age || 0 }}岁</span>
          </div>
          <div></div>
        </div>
        <div style="margin-top: 36rpx;">
          病情描述：{{ chat.text || "-" }}
        </div>
        <div></div>
      </view>

    </view>


    <u-swiper v-if="userInfo.identity == 1" :list="swiperList" autoplay v-model="current"
      :indicator="{ type: 'dots-bar' }" @click="handleClick" @change="onChange" class="home-swiper" height="558rpx">
    </u-swiper>

    <!-- 血压 -->
    <div v-if="userInfo.identity == 1" class="health-card mt-30" @click="gotoDetail('xueya')">
      <div class="card-header">
        <div class="card-title">
          <image src="/static/new/xueya.png" class="card-icon" />
          <span class="card-name">血压</span>
        </div>
        <div class="card-date">2023-07-26 15:38</div>
      </div>

      <div class="card-content mt-8">
        <div class="card-value-group">
          <span class="value-label">舒张压（mmHg）</span>
          <span class="value-number">59</span>
        </div>

        <div class="card-right-group">
          <div class="card-value-group">
            <span class="value-label">收缩压（mmHg）</span>
            <span class="value-number">59</span>
          </div>


          <u-icon name="arrow-right"></u-icon>
        </div>
      </div>
    </div>

    <!-- 心率 -->
    <div v-if="userInfo.identity == 1" class="health-card mt-30" @click="gotoDetail('xinlv')">
      <div class="card-header">
        <div class="card-title">
          <image src="/static/new/xinlv.png" class="card-icon" />
          <!-- <img src="/static/home/xinlv.png" class="card-icon" /> -->
          <span class="card-name">心率</span>
        </div>
        <div class="card-date">2023-07-26 15:38</div>
      </div>

      <div class="card-content mt-8">
        <div class="card-value-group">
          <span class="value-label">测试值（次/分）</span>
          <span class="value-number">59</span>
        </div>

        <div class="card-right-group">
          <div class="card-value-group">
            <span class="value-label">正常（次/分）</span>
            <span class="value-number">59</span>
          </div>
          <u-icon name="arrow-right"></u-icon>
        </div>
      </div>
    </div>

    <!-- 内篓声音 -->
    <div v-if="userInfo.identity == 1" class="health-card mt-30" @click="gotoDetail('neilou')">
      <div class="card-header">
        <div class="card-title">
          <image src="/static/new/nl.png" class="card-icon" />
          <span class="card-name">内篓声音</span>
        </div>
        <div class="card-date">2023-07-26 15:38</div>
      </div>

      <div class="card-simple-content mt-8">
        <div></div>
        <div class="simple-value">正常</div>
        <u-icon name="arrow-right"></u-icon>
      </div>
    </div>

    <!-- 训练指标 -->
    <div v-if="userInfo.identity == 1" class="health-card mt-30" @click="gotoDetail('zhibiao')">
      <div class="card-header">
        <div class="card-title">
          <img src="/static/new/xlzb.png" class="card-icon" />
          <span class="card-name">训练指标</span>
        </div>
        <div class="card-date">2023-07-26 15:38</div>
      </div>

      <div class="card-simple-content mt-8">
        <div></div>
        <div class="simple-value">已完成99%</div>
        <u-icon name="arrow-right"></u-icon>
      </div>
    </div>

    <view class="bottom-tabbar">
      <view class="tab-item active">
        <image src="/static/tabbar/home_active.png" class="tab-icon home-icon" />
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item" @click="switchTab('mall')" v-if="userInfo.identity == 1">
        <image src="/static/tabbar/shop.png" class="tab-icon home-icon" />
        <text class="tab-text">商城</text>
      </view>
      <view class="tab-item" @click="switchTab('consultation')" v-if="userInfo.identity == 1">
        <image src="/static/tabbar/chat.png" class="tab-icon home-icon" />
        <text class="tab-text">健康伙伴</text>
      </view>
      <view class="tab-item" @click="switchTab('profile')">
        <image src="/static/tabbar/me.png" class="tab-icon home-icon" style="width: 54rpx; height: 68rpx;" />
        <text class="tab-text">我的</text>
      </view>
    </view>
  </div>
</template>

<script>
import { healthChatList, chatList } from '@/api/index';
import { info } from '@/api/user';
export default {
  name: 'Home',
  data() {
    return {
      current: 0,
      swiperList: [
        'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
        'https://q9.itc.cn/q_70/images01/20250115/a18c4bf7787b4f7aaeea301ac63b38e6.jpeg',
      ],
      userInfo: {},
      statusBarHeight: 0,
      chatList: [

      ],
    };
  },
  async onShow() {
    this.getSystemInfo();
    this.getUserInfoFn();

    this.chatList.length = 0;

    const _res = await healthChatList();
    _res.data.list.data.forEach((_r) => {
      this.chatList.push(_r);
    });

  },
  methods: {
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
    },
    async getUserInfoFn() {
      try {
        const _res = await info();
        this.userInfo = _res?.data?.userInfo;

        if (!_res?.data?.userInfo.identity) {
          return uni.navigateTo({
            url: '/pages/userInit/index',
          });
        }
        console.log('个人信息', _res);
      } catch (err) {
        console.log('报错了哈', err);
      }
    },
    handleClick(e) {
      console.log(e);
    },
    onChange(e) {
      console.log(e);
    },
    switchTab(tab) {
      switch (tab) {
        case 'health':
          uni.redirectTo({
            url: '/pages/health/index', success: function () {
            },
            fail: function (err) {
              console.log('跳转失败', err);


            },
          });
          break;
        case 'profile':
          uni.redirectTo({
            url: '/pages/profile/index', success: function () {
            },
            fail: function (err) {
              console.log('跳转失败', err);


            },
          });
          break;
        case 'consultation':
          uni.redirectTo({
            url: '/pages/consultation/index', success: function () {
            },
            fail: function (err) {
              console.log('跳转失败', err);


            },
          });
          break;
        case 'mall':
          uni.redirectTo({
            url: '/pages/mall/index', success: function () {
            },
            fail: function (err) {
              console.log('跳转失败', err);


            },
          });
          break;
      }
    },
    gotoDetail(type) {
      switch (type) {
        case 'xueya':
          uni.navigateTo({
            url: `/pages/me/myHealth/xueyaDetail/index`,
          });
          break;
        case 'xinlv':
          uni.navigateTo({
            url: '/pages/me/myHealth/xuelvDetail/index',
          });
          break;
        case 'neilou':
          uni.navigateTo({
            url: '/pages/me/myHealth/neilouDetail/index',
          });
          break;
        case 'zhibiao':
          uni.navigateTo({
            url: '/pages/me/myHealth/xlzbDetail/index',
          });
          break;
        default:
          break;
      }
    },
    // 跳转会话页面
    onSession(user_id, type, session_id) {
      console.log(session_id)
      const userID = user_id;
      let conversationID = ""
      if (type == 1) {
        conversationID = `C2C${userID}`;
      } else {
        conversationID = `GROUP${session_id}`;
      }
      // 1v1 chat: conversationID = `C2C${userID}`
      // group chat: conversationID = `GROUP${groupID}`
      // const conversationID = `C2C${userID}`;
      uni.navigateTo({
        url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`
      });
      // console.log(123)
      // uni.navigateTo({
      //   url: '/pages/consultation/session'
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}

.home-page {
  background-color: rgba(243, 243, 243, 1);
  // min-height: 100vh;
  padding-bottom: 200rpx;
}

.home-swiper {
  height: 558rpx;
}

.health-card {
  background-color: white;
  border-radius: 20rpx;
  margin-left: 48rpx;
  margin-right: 48rpx;
  padding: 30rpx;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 108rpx;
  height: 108rpx;
}

.card-name {
  font-size: 40rpx;
  font-weight: 600;
  color: #4b4866;
  margin-left: 34rpx;
}

.card-date {
  color: #4b4866;
  opacity: 0.44;
  font-size: 36rpx;
}

.card-content {
  display: flex;
  justify-content: space-between;
}

.card-value-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.value-label {
  font-size: 36rpx;
  color: #4b4866;
}

.value-number {
  font-size: 40rpx;
  color: #4b4866;
  margin-top: 12rpx;
  font-weight: 550;
}

.card-right-group {
  display: flex;
  align-items: center;
}

.right-arrow {
  width: 58rpx;
  height: 90rpx;
  margin-left: 20rpx;
}

.card-simple-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.simple-value {
  font-size: 50rpx;
  color: #4b4866;
  font-weight: 550;
}

.mt-30 {
  margin-top: 30rpx;
}

.mt-8 {
  margin-top: 8rpx;
}

.bottom-tabbar {
  padding-top: 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  // height: 50px;
  background: #ffffff;
  display: flex;
  align-items: center;
  border-top: 1px solid #e5e5e5;
  padding-bottom: env(safe-area-inset-bottom);

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tab-icon {
      width: 72rpx;
      height: 72rpx;
      margin-bottom: 8rpx;
      border-radius: 8rpx;

      &.home-icon {
        // background: #2196f3;
      }

      &.mall-icon {
        background: #cccccc;
      }

      &.consultation-icon {
        background: #cccccc;
      }

      &.profile-icon {
        background: #cccccc;
      }
    }

    .tab-text {
      font-size: 36rpx;
      color: rgb(153, 153, 153);
    }

    &.active .tab-text {
      color: #006BFF;
    }
  }
}

.service-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

  .service-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 32rpx;
  }

  .service-menu-row {
    display: flex;
    justify-content: space-around;

    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;

      .menu-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16rpx;
        font-size: 32rpx;

        &.care-icon {
          background: #e3f2fd;
          color: #2196f3;
        }

        &.service-icon {
          background: #fff8e1;
          color: #ffc107;
        }

        &.setting-icon {
          background: #e8f5e8;
          color: #4caf50;
        }

        &.share-icon {
          background: #e8f5e8;
          color: #4caf50;
        }
      }

      .menu-text {
        font-size: 36rpx;
        color: #333333;
        text-align: center;
      }
    }
  }
}

.login-navbar {
  height: 88rpx;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
}

.login-navbar .navbar-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 32rpx;
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: white;
}

.nav-right {
  display: flex;
  align-items: center;
}
</style>
